<template>
    <div class="automaticMain">
      <span class="am_title">自动排产  /  <span style="color: #3384dd">排产结果</span></span>
      <div class="content">
        <div class="con_header">
          <div class="ch_back">
            <i class="el-icon-arrow-left" @click="goBack"></i>
            <span class="back" @click="goBack">返回</span>
          </div>
          <div class="ch_title">
            <span class="title">排产结果</span>
            <el-button type="primary" class="button">一键确认</el-button>
          </div>
        </div>
        <div class="con_list">
          <div class="col_list" v-if="scheduleLists[0] != undefined">
            <div class="col_first">时间/产品</div>
            <div class="col_con" v-for="(i,ind) in scheduleLists[0].data" :key="ind">
              <span class="col_con_top">{{i.time}}</span>
              <span class="col_con_bottom">{{i.weekDay}}</span>
            </div>
          </div>
          <div class="proList" v-for="(value,index) in scheduleLists">
            <div class="pro_title">
              <span class="pt_top">{{value.name}}</span>
            </div>
            <div class="pro_con" v-for="(val,ind) in value.data">
              <div class="pc_con" :class="[{'pro_con-active':val.astock <= 0},{'pro_con-none':val.actualAmount <= 0}]" @click="updatePro(val)">
                <span class="pc_title">
                  <span class="title_l">实际产量</span>
                  <span v-if="val.modifier != null && val.modifier != undefined" class="user">
                    由 <span class="update">{{val.modifier}} 修改确认</span>
                  </span>
                </span>
                <div class="pc_num">
                  <div class="pcn_number">{{val.actualAmount}}</div>
                  <span class="pcn_span">点击修改</span>
                </div>
                <div class="pc_time">更新时间：{{timeChange(val.createtime)}}</div>
                <!--<div class="pc_time">更新时间：{{timeChange(val.time)}}</div>-->
                <div class="pc_datas">
                  <div class="pcd_con">
                    <span class="pcdc_l">计划产量</span>
                    <span class="pcdc_r">{{val.amount}}</span>
                    <div class="hr"></div>
                  </div>
                  <div class="pcd_con">
                    <span class="pcdc_l">客户交付</span>
                    <span class="pcdc_r">{{val.orderAmount}}</span>
                  </div>
                  <div class="pcd_con">
                    <span class="pcdc_l">产前库存</span>
                    <span class="pcdc_r">{{val.bstock}}</span>
                    <div class="hr"></div>
                  </div>
                  <div class="pcd_con">
                    <span class="pcdc_l">结余库存</span>
                    <span class="pcdc_r">{{val.astock}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <upstateProduct v-if="showUpstatePro" :updateProDate="updateProDate" @getBack="getBack" :upType="upType"></upstateProduct>
    </div>
</template>

<script>
  import {mapGetters,mapActions} from 'vuex'
  import upstateProduct from '../../dialog/upstateProduct'
  export default {
    name: "automatic",
    data() {
      return {
        scheduleLists: [], //产品列表
        updateProDate: {}, //修改的参数
        upType:1, //修改的类型，1：排产结果
        canOperation: false, //判断身份是否可以操作
      }
    },
    components:{
      upstateProduct,
    },
    computed:{
      ...mapGetters([
        'showUpstatePro'
      ])
    },
    created() {
      let self = this
      let time = Math.round(new Date(self.$route.query.time).getTime()/1000).toString()
      self.getScheduling(time)
      let authoritiesList = JSON.parse(localStorage.getItem('authoritiesList'))
      for (let i = 0; i < authoritiesList.length; i++){
        if (authoritiesList[i] == 'ROLE_CHECK'){
          self.canOperation = true
        }
      }
    },
    mounted() {
    },
    methods: {
      ...mapActions([
        'upstate'
      ]),
      //返回
      goBack(){
        this.$router.push('/index/scheduling')
      },
      //获取数据
      getScheduling(time){
        let self = this
        self.$http.get(self.conURL + 'pm/api/scheduling?time=' + time).then(res => {
          let result = res.data
          let nameList = []
          for (let i = 0; i < result.length; i++){
            if (i == 0){
              nameList.push(result[i].product)
            } else {
              if (nameList.indexOf(result[i].product) == -1) {
                nameList.push(result[i].product)
              }
            }
          }
          let list = []
          for (let a = 0; a < nameList.length; a++){
            list.push({
              name: nameList[a],
              data:[]
            })
          }
          for (let x = 0; x < result.length; x++){
            list[nameList.indexOf(result[x].product)].data.push(result[x])
          }
          self.scheduleLists = list
        })
      },
      //时间戳处理
      timeChange(p){
        var time = new Date();
        time.setTime(p * 1000);
        var year = time.getFullYear();
        var month = (time.getMonth() + 1) < 10 ?  '0' + (time.getMonth() + 1) : time.getMonth() + 1;
        var date = time.getDate() < 10 ? '0' + time.getDate() : time.getDate();
        var hour = time.getHours() < 10 ? '0' + time.getHours() : time.getHours();
        var minute = time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes();
        var second = time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds();
        return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second
        // return p.substring(0,4) + '-' + p.substring(4,6) + '-' + p.substring(6,8)
      },
      //修改产量
      updatePro(item){
        let self = this
        if (self.canOperation){
          self.upstate({key:'showUpstatePro',val:true})
          let time = self.$route.query.time
          let timestamps = + new Date(time);
          timestamps = timestamps / 1000;
          item.timestamps = timestamps
          item.time2 = time.replace('-','').replace('-','')
          self.updateProDate = item;
        }
      },
      //组件返回值，重置列表刷新
      getBack(par){
        let self = this
        self.scheduleLists = []
        let time = Math.round(new Date(self.$route.query.time).getTime()/1000).toString()
        self.getScheduling(time)
      }
    }
  }
</script>

<style lang="less">
  .automaticMain{
    display: flex;
    flex-direction: column;
    padding: 0 62px;
    box-sizing: border-box;
    background: #fafafa;
    .am_title{
      height: 64px;
      line-height: 64px;
      font-size: 14px;
      padding-left: 10px;
      color: #666666;
    }
    .content{
      display: flex;
      flex-direction: column;
      .con_header{
        background: #fff;
        padding: 0 26px;
        box-sizing: border-box;
        border: 1px solid #e5e5e5;
        border-bottom: none;
        .ch_back{
          margin-top: 29px;
          display: flex;
          flex-direction: row;
          margin-bottom: 24px;
          .el-icon-arrow-left{
            font-size: 18px;
            line-height: 18px;
            margin-right: 5px;
            cursor: pointer;
          }
          .back{
            font-size: 18px;
            line-height: 18px;
            color: #222222;
            cursor: pointer;
          }
        }
        .ch_title{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          margin-bottom: 20px;
          .title{
            font-size: 26px;
            color: #3b3b3b;
            line-height: 39px;
          }
          .button{
            width: 95px;
            height: 39px;
          }
        }
      }
      .con_list{
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        .col_first{
          width: 141px;
          height: 81px;
          text-align: center;
          line-height: 82px;
          border-top: 1px solid #e5e5e5;
          border-left: 1px solid #e5e5e5;
          font-size: 18px;
          color: #666666;
          background: #fff;
        }
        .col_list{
          display: flex;
          flex-direction: column;
          .col_con{
            width: 141px;
            height: 249px;
            text-align: center;
            border-top: 1px solid #e5e5e5;
            border-left: 1px solid #e5e5e5;
            font-size: 18px;
            color: #666666;
            display: flex;
            flex-direction: column;
            justify-content: center;
            .col_con_top,.col_con_bottom{
              font-size: 18px;
              color: #3b3b3b;
            }
          }
          .col_con:last-child{
            border-bottom: 1px solid #e5e5e5;
          }
        }
        .proList{
          display: flex;
          flex-direction: column;
          width: 370px;
          .pro_title{
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 81px;
            text-align: center;
            border-top: 1px solid #e5e5e5;
            border-left: 1px solid #e5e5e5;
            font-size: 18px;
            color: #666666;
            background: #fff;
            .pt_top{
              font-size: 24px;
              color: #3b3b3b;
            }
          }
          .pro_con{
            height: 250px;
            padding: 10px 19px;
            box-sizing: border-box;
            border-left: 1px solid #e5e5e5;
            border-top: 1px solid #e5e5e5;
            display: flex;
            flex-direction: column;
            justify-content: center;
            .pc_con{
              width: 331px;
              height: 218px;
              border: 1px solid #eeeeee;
              margin: auto;
              background: #eaeaea;
              border-radius: 5px;
              box-shadow: #eaeaea 0px 0px 15px;
              padding: 29px 25px;
              padding-bottom: 0;
              box-sizing: border-box;
              display: flex;
              flex-direction: column;
              cursor: pointer;
              .pc_title{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                .title_l{
                  color: #666666;
                  font-size: 16px;
                  margin-bottom: 16px;
                }
                .user{
                  font-size: 14px;
                  line-height: 25px;
                  color: #999999;
                  .update{
                    color: #3384dd;
                  }
                }
              }
              .pc_num{
                display: flex;
                flex-direction: row;
                margin-bottom: 19px;
                .pcn_number{
                  color: #3384dd;
                  font-size: 28px;
                  line-height: 28px;
                  margin-right: 16px;
                }
                .pcn_span{
                  color: #999999;
                  font-size: 14px;
                  line-height: 28px;
                }
              }
              .pc_time{
                font-size: 14px;
                color: #999999;
                padding-bottom: 15px;
                border-bottom: 1px dashed #e5e5e5;
              }
              .pc_datas{
                width: 100%;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                .pcd_con{
                  width: 50%;
                  height: 34px;
                  display: flex;
                  flex-direction: row;
                  justify-content: center;
                  position: relative;
                  .hr{
                    display: block;
                    width: 1px;
                    height: 22px;
                    background: #d0d1d3;
                    position: absolute;
                    top: 6px;
                    right: 1px;
                  }
                  .pcdc_l{
                    font-size: 14px;
                    color: #666666;
                    margin-right: 5px;
                    line-height: 34px;
                  }
                  .pcdc_r{
                    font-size: 14px;
                    color: #3384dd;
                    line-height: 34px;
                  }
                }
              }
            }
            .pro_con-active{
              background-color: #ef4a4e;
              .pc_title{
                .title_l,.user{
                  color: #fff;
                }
              }
              .pc_num{
                .pcn_number,.pcn_span{
                  color: #fff;
                }
              }
              .pc_time{
                color: #fff;
              }
              .pc_datas{
                .pcd_con{
                  .pcdc_l,.pcdc_r{
                    color: #fff;
                  }
                }
              }
            }
            .pro_con-none{
              background-color: #eaeaea;
              color: #666666
            }
          }
        }
        .proList:last-child{
          .pro_title,.pro_con{
            border-right: 1px solid #e5e5e5;
          }
        }
      }
    }
  }
</style>
